<!DOCTYPE html>
<html lang="ZN-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>😊晚风留言板欢迎您😊</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="javascript" href="../js/style.js">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
</head>
<body>
    <section class="showcase">
        <div id="app">
            <div class="video-container" :style="isActive==true?'':'filter:blur(3px);'">
                <video src="../assets/video.mp4" autoplay muted loop></video>
            </div>
            <div class="content">
                <div>
                    <h1>晚风留言板</h1>
                    <h2 style="color: RGB(255,193,37,0.8);"> 所谓骑士总能救出公主，是因为恶龙从没有伤害过她</h2>
                    <a class="btn" @click="loginshow" v-show="isloginbtu">{{moremsg}}</a>
                    <a class="btn" @click="Registershow" v-show="isRegisterbtu">{{moremsg}}</a>
                    <a class="btn" @click="gxbshow">{{cdeomsg==false?'感谢你们':'关闭'}}</a>
                </div>
                <transition name="fade">
                    <!-- 动画库用法  前缀 +动作 +可选延时<div class="loginc animate__animated animate__fadeIn   animate__delay-1s" v-show="islogin"></div> -->
                    <div class="loginc" v-show="islogin">
                        <div class="d">
                            <div class="log">
                                <h1>登录</h1>
                            </div>
                            <div class="Inputcheck">
                                <i class="fa fa-phone" style="font-size: 20px;"></i><input type="text" class="e"
                                    v-model="logfrom.phone" placeholder="PHONE" @input="checkphone">
                                <p>{{msgphone}}</p>
                            </div>

                            <div class="Inputcheck">
                                <i class="fa fa-key" style="font-size: 18px;"></i>
                                <input @input="checkpassword" type="password" class="e" v-model="logfrom.password"
                                    placeholder="PASSWORD">
                                <p>{{msgpassword}}</p>
                            </div>
                        </div>
                        <div class="butbox">
                            <p @click="showbox">我没有账号，我需要注册</p>
                            <a @click="Login" href="JavaScript:void(0)" class="btn">确定</a>
                            <a @click="loginshow" href="JavaScript:void(0)" class="btn">取消</a>
                        </div>
                    </div>
                </transition>

                <transition name="fade" name="fade">
                    <div class="Registershowc" v-show="isRegister">
                        <div class="d">
                            <div class="log">
                                <h1>注册</h1>
                            </div>
                            <div class="Inputcheck">
                                <i class="fa fa-phone" style="font-size: 20px;"></i>
                                <input type="text" @input="checkrephone" class="e" v-model="refrom.phone"
                                    placeholder="PHONE">
                                <p>{{msgrephone}}</p>
                            </div>
                            <div class="Inputcheck">
                                <i class="fa fa-key" style="font-size: 20px;"></i>
                                <input type="password" @input="checkrepassword" class="e" v-model="refrom.password"
                                    placeholder="PASSWORD">.
                                <p>{{msgrepassword}}</p>
                            </div>
                            <div class="Inputcheck">
                                <i class="fa fa-user-o" style="font-size: 20px;"></i>
                                <input type="text" class="e" @input="checkname" v-model="refrom.name"
                                    placeholder="NAME">
                                <p>{{msgrename}}</p>
                            </div>
                            <div class="Inputcheck">
                                <i class="fa fa-envelope-o" style="font-size: 20px;"></i>
                                <input type="email" class="e" @input="checkemail" v-model="refrom.email"
                                    placeholder="EMAIL">
                                <p>{{msgreemail}}</p>
                            </div>
                        </div>
                        <div class="butbox">
                            <a @click="Register" href="JavaScript:void(0)" class="btn">确定</a>
                            <a @click="Registershow" href="JavaScript:void(0)" class="btn">取消</a>
                        </div>
                    </div>
                </transition>
                <transition name="fade" name="fade">
                    <div class="usercode" v-show="gxshow">
                        <div class="box_code" >
                            <div style="float: left;">
                                <img width="200" src="../assets/linson_贡献榜/lmj_shadow.png" alt="">
                                <p>美术工程师</p>
                                <span>提供本项目素材</span>
                            </div>

                            <div style="float: right;"><img width="200" src="../assets/linson_贡献榜/lxf_shadow.png" alt="">
                                <p> 全栈工程师</p>
                                <span>处理后端底层发送json</span>
                            </div>
                            <div style="float: left;"><img width="200" src="../assets/linson_贡献榜/lyh_shadow.png" alt="">
                                <p>前端工程师</p>
                                <span>解决vue数据劫持后双向绑定</span>
                            </div>
                            <div style="float: right;"><img width="200" src="../assets/linson_贡献榜/hql_shadow.png" alt="">
                                <p>运维工程师</p>
                                <span>优化项目构性能调优</span>
                            </div>
                            <div><img height="65" src="../assets/linson_贡献榜/wf_shadow.png" alt="">
                                <p>Linson开源作品</p>
                                <a href="https://gitee.com/s88888888" target="_blank"><span>开源地址</span> </a> 
                            </div>
                        </div>
                    </div>
                </transition>
            </div>
        </div>
    </section>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            logfrom: [], //表单账号密码
            refrom: [],
            islogin: false,
            isRegister: false,
            moremsg: "查看更多",
            cdeomsg: false,
            isActive: true,
            isloginbtu: true,
            isRegisterbtu: false,
            msgphone: '',
            msgpassword: '',
            gxshow:false,
            msgrephone: '',
            msgrepassword: '',
            msgreemail: '',
            msgrename: '',

        },
        methods: {
            gxbshow(){
                this.gxshow=!this.gxshow;

                this.cdeomsg=!this.cdeomsg;

                this.isActive=!this.isActive;

            },
            Login: function () {
                let that = this;
                if (this.msgphone != "") {

                    setTimeout("alert('不要点了')")
                    return;
                } else if (this.msgpassword != "") {
                    alert("不要点了")
                    return;
                }
                axios.post(
                        `http://localhost:8999/MessageBoard_war/login?phone=${this.logfrom.phone}&password=${this.logfrom.password}`
                    )
                    .then(function (response) {
                        if (response.data.code == 200) {
                            localStorage.setItem('token', response.headers.token)
                            if (response.headers.token == null) {
                                alert("人还是不要太好奇，看看你数据库连接没？")
                                return;
                            } else {
                                location.replace("../html/index.html");
                            }

                        } else {
                            alert(response.data.data);
                            return;
                        }
                    })
                localStorage.setItem('phone', this.logfrom.phone);
            },
            Register() {
                let that = this;
                if (this.msgrephone != "") {

                    setTimeout("alert('不要点了')")
                    return;
                } else if (this.msgrepassword != "") {
                    alert("不要点了")
                    return;
                }
                if (this.msgreemail != "") {

                    setTimeout("alert('不要点了')")
                    return;
                } else if (this.msgrename != "") {
                    alert("不要点了")
                    return;
                }
                axios.post(
                        `http://localhost:8999/MessageBoard_war/Register?name=${this.refrom.name}&phone=${this.refrom.phone}&password=${this.refrom.password}&email=${this.refrom.email}`
                    )
                    .then(function (response) {
                        if (response.data.code != 200) {
                            alert(response.data.data);
                        } else {
                            that.isRegister = false;
                            that.islogin = true;
                            alert(response.data.data, "用户验证失败");
                        }

                    })

            },
            // 控制盒子隐藏消失
            loginshow: function () {
                this.islogin = !this.islogin;
                this.isActive = !this.isActive;

                if (this.islogin) {
                    this.moremsg = "返回菜单";
                } else {
                    this.moremsg = "查看更多";
                }
            },
            Registershow: function () {
                this.isRegister = !this.isRegister;
                this.isActive = !this.isActive;
                this.isloginbtu = !this.isloginbtu;
                this.isRegisterbtu = !this.isRegisterbtu;
                if (this.isRegister) {
                    this.moremsg = "返回菜单";
                } else {
                    this.moremsg = "查看更多";
                }
            },
            showbox: function () {

                this.islogin = false;
                this.isRegister = true;
                this.isloginbtu = false;
                this.isRegisterbtu = true;
            },

            //    登录表单验证
            checkphone: function () {
                let demo = /^1[3|4|5|7|8]\d{9}$/;

                if (this.logfrom.phone == "") {
                    this.msgphone = "*手机不可以为空"
                } else if (!demo.test(this.logfrom.phone)) {
                    this.msgphone = "*手机格式错误"
                } else {
                    this.msgphone = "";
                }
            },
            checkpassword: function () {
                var patrn = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/;
                if (this.logfrom.password == "") {
                    this.msgpassword = "*密码不能为空"
                } else if (this.logfrom.password.length < 6 || patrn.test(this.logfrom.password)) {
                    this.msgpassword = "*密码不合法";
                } else {
                    this.msgpassword = "";
                }
            },


            //注册表单验证
            checkrephone: function () {
                let login = /^1[3|4|5|7|8]\d{9}$/;
                if (this.refrom.phone == "") {
                    this.msgrephone = "*手机不可以为空"
                } else if (!login.test(this.refrom.phone)) {
                    this.msgrephone = "*手机格式错误"
                } else {
                    this.msgrephone = "";
                }
            },
            checkrepassword: function () {
                var patrn = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/;
                let that = this;
                if (this.refrom.password == "") {
                    this.msgrepassword = "*密码不能为空"
                } else if (this.refrom.password.length < 6 || patrn.test(this.refrom.password)) {
                    this.msgrepassword = "*密码不合法";
                } else {
                    this.msgrepassword = "";
                }
            },
            checkname: function () {
                if (this.refrom.name == "") {
                    this.msgrename = "用户名不能为空";
                } else {
                    this.msgrename = "";
                }
            },
            checkemail: function () {
                var regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if (this.refrom.email == '') {
                    this.msgreemail = "请输入邮箱"
                } else if (!regEmail.test(this.refrom.email)) {
                    this.msgreemail = "邮箱格式不正确"
                } else {
                    this.msgreemail = ""
                }
            },
        }
    })
</script>


</html>